<template>
	<view class="bugPage">
		<u-navbar title="立即购买" @leftClick="rightClick" :autoBack="true" bgColor="#439B05" leftIconColor="#ffffff"
			:titleStyle="titleStyle" :placeholder="true">
		</u-navbar>

		<view class="tabsBox">
			<view class="btnsBox">
				<view class="btn" :class="currIndex==0?'btns':''" @click="handleTabs(0)">
					快递配送
				</view>
				<!-- <view class="btn" :class="currIndex==1?'btns':''" @click="handleTabs(1)">
					自提
				</view> -->
			</view>
		</view>

		<view class="contentBox">
			<view v-if="currIndex==0" class="addressType">
				<view v-if="addressData==null" class="address PubAddress" @click="handleSelectaddress">
					<view class="left">
						<u-icon name="map" color="#439B05"></u-icon>
						<view class="" style="margin-left: 5rpx;">
							选择地址
						</view>
					</view>
					<image src="../../static/image/rightd.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
				</view>
				<view v-else class="address addressMessage" @click="handleSelectaddress">
					<view class="">
						<u-icon name="map" color="#439B05"></u-icon>
					</view>
					<view class="addressData" style="margin-left: 20rpx;">
						<view class="">
							<text>{{addressData.name}}</text>
							<text style="margin-left: 20rpx;">{{addressData.phone}}</text>
						</view>

						<view class="" style="font-size: 24rpx;">
							<text v-if="addressData.type=='1'">[默认]</text>
							<text>{{addressData.area}}</text><text
								style="margin-left: 20rpx;">{{addressData.address}}</text>
						</view>
					</view>
				</view>

				<view class="selecttimeBox PubAddress" @click="handletime">
					<view class="left">
						<u-icon name="clock" color="#439B05"></u-icon>
						<view class="" style="margin-left: 5rpx;">
							{{delivery_time==""?"选择配送到达时间(必填)":delivery_time}}
						</view>
					</view>
					<image src="../../static/image/rightd.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
				</view>
			</view>

			<view v-else class="addressType">
				<view v-if="pointList == null" class="address PubAddress" @click="handlePoint">
					<view class="left">
						<u-icon name="map" color="#439B05"></u-icon>
						<view class="" style="margin-left: 5rpx;">
							选择自提点
						</view>
					</view>
					<image src="../../static/image/rightd.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
				</view>
				<view v-else class="address addressMessage" @click="handlePoint">
					<view class="">
						<u-icon name="map" color="#439B05"></u-icon>
					</view>
					<view class="addressData" style="margin-left: 20rpx;">
						<view class="">
							<text>{{pointList.name}}</text>
							<text style="margin-left: 20rpx;">{{pointList.phone}}</text>
						</view>

						<view class="" style="font-size: 24rpx;">
							<!-- <text>{{pointList.area}}</text> -->
							<text style="margin-left: 20rpx;">{{pointList.address}}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="productMessage" v-for="(item,index) in pageData" :key="item.id">
				<image :src="item.image" style="width: 160rpx;height: 160rpx;" mode=""></image>
				<view class="message">
					<view class="name">
						{{item.name}}
					</view>
					<view class="specification">
						规格：{{item.sku_text}}
					</view>
					<view class="messageBottom">
						<view class="price">
							₱{{Number(item.price)}}
						</view>
						<view class="number">
							x{{item.num }}
						</view>
					</view>

				</view>
			</view>

			<!-- 运费备注 -->
			<view class="freight_remark">
				<view class="item">
					<view class="lable">
						运费
					</view>
					<view class="value">
						{{freight ? '₱'+ freight:'包邮'}}
					</view>

				</view>
				<view class="item">
					<view class="lable">
						备注信息
					</view>
					<!-- <view class="value" style="display: flex;"> -->
					<input class="value" style="text-align: right;" v-model="remark" type="text" placeholder="选填备注信息" />
					<!-- <image src="../../static/image/rightd.png" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
					<!-- </view> -->
				</view>

				<view class="number_sum">
					<view class="number_sums">
						<view class="">
							共{{numSum}}件
						</view>
						<view class="" style="margin-left: 20rpx;">
							小计<text style="color: #FF3D3D;">₱{{priceSum}}</text>
						</view>
					</view>

				</view>

			</view>

			<!-- 支付方式 -->
			<view class="payType">
				<view class="title">
					支付方式
				</view>

				<!-- <view class="teptitem" :class="payType==0?'teptitemed':''" @click="handleSelectPaytype(0)">
					<image src="../../static/image/pay.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						支付宝支付
					</view>
				</view> -->
				<!-- <view class="teptitem" :class="payType==1?'teptitemed':''" @click="handleSelectPaytype(1)">
					<image src="../../static/image/gcach.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						gcash
					</view>
				</view> -->
				<view class="teptitem" :class="payType==2?'teptitemed':''" @click="handleSelectPaytype(2)">
					<image src="../../static/image/hdfk.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						货到付款
					</view>
				</view>

				<view class="tiptext">
					在线支付咨询客服
				</view>
			</view>
		</view>

		<view class="" style="height: 230rpx;"></view>

		<view class="bottomBtn">
			<view class="sum">
				合计：<text style="color: #FF3D3D;font-size: 35rpx;">₱{{priceSum + freight }}</text>
				<view v-if="differ" class="" style="font-size: 23rpx;">
					当前还差 <text style="color: #FF3D3D;font-size: 30rpx;">₱{{differ}}</text> 满足包邮
				</view>
			</view>
			<view v-if="user_area_id==null" class="btn" @click="handleconfigBuy">
				立即购买
			</view>
			<view v-else class="btn" style="opacity: 1;" @click="handlebuy">
				立即购买
			</view>
		</view>

		<u-popup :show="timeshow" mode="bottom" :round="20" :closeOnClickOverlay="true" @close="timeshow=false"
			:closeable="true">
			<view class="timeContent">
				<view class="" style="width: 100%;text-align: center;">
					选择配送到达时间
				</view>

				<view class="contentBox">
					<view class="dateBox">
						<view class="dateItem" :class="dateCurrindex==index?'dateItemed' : ''"
							v-for="(item,index) in dateArr" @click="handledateCurrindex(index)">
							{{item}}
						</view>
					</view>
					<view class="timeBox">
						<view v-if="showtimeList.length>0" class="">
							<view class="timeItem" v-for="(item,index) in showtimeList"
								@click=" handledeliverytime(index)">
								<view class="">
									{{item}}
								</view>
								<image v-if="timeCurrindex==index" src="../../static/image/f1.png" mode=""
									style="width: 40rpx;height: 40rpx;"></image>
							</view>
						</view>
						<view v-else class="notime">
							今天暂无可配送时间哦~
						</view>

						<!-- <view class="configBnt" @click="handledeliverytime">
							确定
						</view> -->
					</view>

				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		defaultAddress,
		createorder,
		countFreight,
		waitpay,
		deliverySettings,
		cardNum
	} from "@/api/api.js"
	export default {
		data() {
			return {
				titleStyle: {
					'color': '#ffffff',
				},
				currIndex: 0,
				payType: 2,
				pageData: [],
				addressData: null,
				user_area_id: null, //地址id
				remark: "", //备注
				freight: null, //运费
				numSum: 0, //共计件，
				priceSum: 0, //总金额
				dataArr: [],
				pointList: null,
				timeshow: false,
				dateArr: [],
				timeArr: ['08:00~10:00', '10:00~12:00', '12:00~14:00', '14:00~16:00', '16:00~18:00', '18:00~20:00'],
				dateCurrindex: 0,
				timeCurrindex: null,
				delivery_time: "",
				timeconfig: {},
				differ: 0,
				timeArrcurr: [],
				showtimeList: [],

			}
		},
		async onLoad(options) {
			console.log("data", JSON.parse(options.data))
			this.pageData = JSON.parse(options.data)
			this.pageData.forEach((item, index) => {
				this.numSum = this.numSum + item.num
				this.priceSum = this.priceSum + item.price * item.num

				this.dataArr.push({
					products_id: item.products_id,
					sku_num_id: item.sku_id,
					num: item.num,
				})
			})
			await this.handledeliverySettings()
			await this.handleSelecttime()
		},
		onShow() {
			if (uni.getStorageSync("selectAddress")) {
				this.addressData = uni.getStorageSync("selectAddress")
				this.user_area_id = this.addressData.id
				this.handleCountFreight()
			} else {
				this.handledefaultAddress()
			}
			if (uni.getStorageSync("point")) {
				this.pointList = uni.getStorageSync("point")
			}
		},
		onHide() {
			uni.removeStorageSync("selectAddress")
			uni.removeStorageSync("point")
		},
		methods: {
			divideTimeRange(startTime, endTime, interval = 30) {
				let segments = [];
				let current = new Date(startTime);
				let end = new Date(endTime);
				while (current < end) {
					let segmentStart = new Date(current);
					let segmentEnd = new Date(current);
					segmentEnd.setMinutes(segmentEnd.getMinutes() + interval);

					// 确保不会超过结束时间
					if (segmentEnd > end) {
						segmentEnd = end;
					}
					segments.push({
						start: segmentStart,
						end: segmentEnd
					});

					current.setMinutes(current.getMinutes() + interval);
				}
				return segments;
			},

			compareTime(time1, time2) {
				var date1 = new Date("2000-01-01 " + time1); // 创建一个日期对象，日期设为固定值
				var date2 = new Date("2000-01-01 " + time2); // 创建一个日期对象，日期设为固定值

				if (date1.getTime() > date2.getTime()) {
					//比较的时间大于当前时间
					// return time1 + " 大于 " + time2;
					return '1'
				} else if (date1.getTime() < date2.getTime()) {
					// return time1 + " 小于 " + time2;
					//比较的时间小于当前时间
					return '2'
				} else {
					// return time1 + " 等于 " + time2;
					return '3'
				}

			},

			handleeeeee() {
				// 使用示例
				let start = '2024-05-01T' + this.timeconfig.range_time_strat;
				let end = '2024-05-01T' + this.timeconfig.range_time_end;
				// console.log("88888",start,end)
				this.timeArr = []
				this.timeArrcurr = []
				let timeSegments = this.divideTimeRange(start, end, parseInt(this.timeconfig.interval)); // 每个区间60分钟
				// console.log("timeSegments",timeSegments)
				timeSegments.forEach((item, index) => {
					const starthours = item.start.getHours();
					const startminutes = item.start.getMinutes();
					const starttime =
						`${starthours.toString().padStart(2, '0')}:${startminutes.toString().padStart(2, '0')}`;
					const endhours = item.end.getHours();
					const endminutes = item.end.getMinutes();
					const endtime =
						`${endhours.toString().padStart(2, '0')}:${endminutes.toString().padStart(2, '0')}`;
					this.timeArr.push(starttime + '~' + endtime)
					this.timeArrcurr.push(starttime + '~' + endtime)
				})
				// this.timeArrcurr = this.timeArr
				this.showtimeList = this.timeArr
				if (this.timeconfig.is_at_days == 1) {
					let currindex = null
					const currentDate = new Date();
					const hours = currentDate.getHours();
					const minutes = currentDate.getMinutes();
					let currtime = hours + ":" + minutes + ":00"
					this.timeArr.forEach((item, index) => {
						let timestart = item.split('~')[0] + ":00"
						let endstart = item.split('~')[1] + ":00"
						// console.log("00000088888888888", timestart, endstart, currtime)
						let startpd = this.compareTime(timestart, currtime)
						let endpd = this.compareTime(endstart, currtime)
						if (startpd == '2' && endpd == '1') {
							// console.log("index==========", index)
							currindex = index
						}
					})
					console.log("currindex", this.timeArr)
					if (!currindex) {
						let heardstart = this.timeArr[0].split('~')[0] + ":00"
						let heardend = this.timeArr[0].split('~')[1] + ":00"
						let bottomstart = this.timeArr[this.timeArr.length - 1].split('~')[0] + ":00"
						let bottomend = this.timeArr[this.timeArr.length - 1].split('~')[1] + ":00"
						// console.log("heardstart-heardend", heardstart, heardend, bottomstart, bottomend)
						// console.log("heaed", this.compareTime(heardstart, currtime), this.compareTime(bottomend, currtime))
						if (this.compareTime(heardstart, currtime) == '1') {
							this.timeArrcurr = this.timeArrcurr.splice(currindex)
							this.showtimeList = this.timeArrcurr
							return
						}
						if (this.compareTime(bottomend, currtime) == '2') {
							this.showtimeList = []
							this.timeArrcurr = []
							return
						}

					} else {
						this.timeArrcurr = this.timeArrcurr.splice(currindex)
						this.showtimeList = this.timeArrcurr
					}

				}

			},
			async handledeliverySettings() {
				let res = await deliverySettings()
				this.timeconfig = res.data
				this.handleeeeee()
			},
			handleSelecttime() {
				for (let i = 1; i <= this.timeconfig.how_days; i++) {
					this.dateArr.push(this.getGivenTime(i))
				}
			},
			getGivenTime(count) {
				var date = new Date();
				if (this.timeconfig.is_at_days == 1) {
					date.setDate(date.getDate() + (count - 1));
				} else {
					date.setDate(date.getDate() + count);
				}
				return (date.getMonth() + 1) + "-" + date.getDate();
			},
			async handledefaultAddress() {
				let res = await defaultAddress()
				if (res.data) {
					this.addressData = res.data
					this.user_area_id = this.addressData.id
					this.handleCountFreight()
				}
			},

			handleTabs(index) {
				this.currIndex = index
			},
			handleSelectPaytype(index) {
				this.payType = index
			},
			handleSelectaddress() {
				uni.navigateTo({
					url: `/pages/mine/addressList?type=${1}`
				})
			},
			handleconfigBuy() {
				if (!this.user_area_id) {
					uni.showToast({
						title: '请先选择地址！',
						icon: "none",
						duration: 2000
					});
				}
			},
			async handleCountFreight() {
				let res = await countFreight({
					user_area_id: this.addressData.id,
					data: this.dataArr,
				})
				this.freight = res.data.data
				this.differ = res.data.differ
			},
			handledateCurrindex(index) {
				this.dateCurrindex = index
				this.timeCurrindex = null
				if (this.timeconfig.is_at_days == 1 && this.dateCurrindex == 0) {
					this.showtimeList = this.timeArrcurr
					// console.log("333333333", this.timeArrcurr)
				} else {
					// console.log("444444", this.timeArr)
					this.showtimeList = this.timeArr

				}
			},
			handledeliverytime(index) {
				this.timeCurrindex = index
				this.timeshow = false
				this.delivery_time = this.dateArr[this.dateCurrindex] + '-' + this.showtimeList[this.timeCurrindex]
			},
			//立即购买
			async handlebuy() {
				let data = {}
				if (this.currIndex == 0) {
					if (this.delivery_time == "") {
						uni.showToast({
							title: "请选择配送时间！",
							icon: "none",
							duration: 2000
						});
						return
					}
					if (this.payType != 2) {
						uni.showToast({
							title: "联系客服获取支付渠道！",
							icon: "none",
							duration: 2000
						});
						return
					}
					data = {
						data: this.dataArr,
						type: this.payType + 1, //1是
						user_area_id: this.user_area_id,
						remark: this.remark,
						method: '2',
						freight: this.freight,
						delivery_time: this.delivery_time,
					}
				} else {
					if (this.pointList == null) {
						uni.showToast({
							title: "请选择自提点！",
							icon: "none",
							duration: 2000
						});
						return
					}
					if (this.payType != 2) {
						uni.showToast({
							title: "支付方式请选择货到付款！",
							icon: "none",
							duration: 2000
						});
						return
					}
					data = {
						data: this.dataArr,
						type: this.payType + 1,
						remark: this.remark,
						method: '1',
						freight: this.freight,
						pickup_id: this.pointList.id
					}
				}

				// console.log("data", data)
				let res = await createorder(data)
				//创建订单
				if (res.code == 1000) {
					// console.log("1111")
					// return
					let subres = await waitpay({
						pay_type: '2',
						order_no: res.data
					})
					//确认支付
					if (subres.code == 1000) {
						uni.showToast({
							title: subres.message,
							icon: "none",
							duration: 2000
						});
						setTimeout(async () => {
							await this.handleCarnum()
							await this.handleOrderlist()
						}, 2000)

					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						});
					}

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			},
			handleOrderlist() {
				uni.redirectTo({
					url: "/pages/mine/myorderList"
				})
			},
			handlePoint() {
				uni.navigateTo({
					url: "/pages/mine/ppointList"
				})
			},
			rightClick() {},

			handletime() {
				this.timeshow = true
			},

			async handleCarnum() {
				let res = await cardNum()
				if (res.data > 0) {
					console.log("00000")
					uni.setTabBarBadge({
						index: 2,
						text: res.data.toString()
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.configBnt {
		width: 100rpx;
		height: 60rpx;
		text-align: center;
		padding: 0rpx 30rpx;
		background-color: #439B05;
		color: #ffffff;
		line-height: 60rpx;
		border-radius: 10rpx;
		float: right;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.timeContent {
		width: 750rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-top: 30rpx;
		box-sizing: border-box;

		.contentBox {
			width: 100%;
			display: flex;
			margin-top: 70rpx;

			.dateBox {
				width: 242rpx;
				height: 896rpx;
				background: #F5F5F5;

				.dateItem {
					width: 242rpx;
					height: 104rpx;
					text-align: center;
					line-height: 104rpx;
				}

				.dateItemed {
					background: #ffffff;
				}

			}

			.timeBox {
				width: 508rpx;
				height: 896rpx;
				overflow: auto;
				padding-bottom: 40rpx;
				box-sizing: border-box;

				.timeItem {
					width: 100%rpx;
					height: 104rpx;
					text-align: center;
					line-height: 104rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.notime {
					width: 100%;
					text-align: center;
					margin-top: 30rpx;
					color: #999999;

				}
			}

		}
	}

	.bugPage {
		.tabsBox {
			width: 100%;
			height: 164rpx;
			background: #439B05;
			padding-top: 30rpx;
			box-sizing: border-box;

			.btnsBox {
				width: 176rpx;
				height: 72rpx;
				// background: rgba(255, 255, 255, 0.2);
				margin: 0 auto;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;


				.btn {
					width: 176rpx;
					height: 68rpx;
					border-radius: 100rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					line-height: 68rpx;
					text-align: center;
					color: #ffffff;
					margin: 0 auto;
				}

				.btns {
					background: #FFFFFF;
					color: #439B05;
				}
			}
		}

		.contentBox {
			transform: translate(0rpx, -34rpx);
		}

		.addressType {
			width: 100%;
			// height: 196rpx;

			.address {
				width: 100%;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				height: 100rpx;
				background: #FFFFFF;
			}

			.selecttimeBox {}

			.PubAddress {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				margin-bottom: 2rpx;
				padding: 36rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
					display: flex;
					align-items: center;
				}
			}

			.addressMessage {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				margin-bottom: 2rpx;
				padding: 36rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.productMessage {
			width: 100%;
			height: 220rpx;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.message {
				height: 160rpx;
				margin-left: 20rpx;
				width: 510rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					width: 510rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 38rpx;
					white-space: nowrap;
					/* 设置不换行 */
					overflow: hidden;
					/* 设置超出部分隐藏 */
					text-overflow: ellipsis;
					/* 设置溢出的文本显示省略号 */
				}

				.specification {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
				}

				.messageBottom {
					width: 510rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FF3D3D;
						line-height: 38rpx;
					}

					.number {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;
					}
				}
			}
		}

		.freight_remark {
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			margin-top: 2rpx;

			.item {

				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.lable {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.value {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
				}
			}

			.number_sum {
				width: 100%;
				height: 80rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				margin-top: 2rpx;
				background-color: #ffffff;
				position: relative;

				.number_sums {
					display: flex;
					position: absolute;
					right: 40rpx;
				}

			}
		}

		.payType {
			width: 100%;
			// height: 484rpx;
			background: #ffffff;
			margin-top: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
			}

			.teptitem {
				display: flex;
				align-items: center;
				width: 100%;
				height: 98rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				border: 2rpx solid #EEEEEE;
				padding: 26rpx 32rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}

			.tiptext {
				color: #999999;
				font-size: 25rpx;
				margin-top: 30rpx;
				text-align: right;
			}

			.teptitemed {
				border: 2rpx solid #439B05;
			}
		}

		.bottomBtn {
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 38rpx;

			.btn {
				width: 280rpx;
				height: 80rpx;
				background: #FF3D3D;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				opacity: 0.4;
			}
		}
	}
</style>